<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml" lang="zh">
<head>
    <th:block th:include="common/head::head"/>
    <style type="text/css">
        body {
            position: absolute;
            top: 0px;
            right: 0px;
            bottom: 0px;
            left: 0px;
            padding: 10px;
        }

        .echarts {
            margin: 20px auto;
            width: 94%;
            height: 400px;
        }
    </style>
    <script th:src="@{${session.jpomProxyPath}+'/static/js/echarts.min.js?v='+${session.staticCacheTime}}"></script>
</head>

<body>

<div class="echarts" id="echarts"></div>
<table class="layui-table" id="tab_monitor" lay-filter="tab_monitor" style="margin-top:10px"></table>
</body>
<script type="application/javascript">
    var ws, myEcharts;
    var col = [{field: 'pid', title: '进程id', sort: true, width: '6%'},
        {field: 'command', title: '进程名称'},
        {field: 'port', title: '端口', sort: true, width: '6%'},
        {field: 'user', title: '所有者', width: '8%', sort: true},
        {field: 'jpomName', title: '项目名称', width: '8%', sort: true},
        {field: 'res', title: '物理内存', width: '8%', sort: true},
        {field: 'status', title: '进程状态', width: '8%', sort: true},
        {field: 'cpu', title: '占用CPU', width: '8%', sort: true},
        {field: 'mem', title: '物理内存', width: '8%', sort: true},
        {field: 'time', title: '时间总计', sort: true},
        {field: 'pr', title: '优先级', width: '6%', sort: true},
        // {field: 'NI', title: 'nice值', width: '6%', sort: true},
        {field: 'virt', title: '虚拟内存', width: '8%', sort: true},
        {field: 'shr', title: '共享内存', width: '8%', sort: true}];
    var config = {
        id: 'tab_monitor',
        elem: '#tab_monitor',
        cols: [col],
        done: function (data) {
        }
    };

    function loadSuccess() {
        loadTop();
        //加载进程信息
        loadProcessList();
        //
        tableRender(config);
    }

    function loadTop() {
        silentAjax({
            url: './getTop',
            success: function (data) {
                if (200 === data.code && data.data) {
                    loadEchartsData(data.data);
                    //打开socket
                    linkSocket(true);
                }
            }
        });
    }

    function loadEchartsData(data) {
        let series = data.series;
        let cpuItem = {
            name: 'cpu占用',
            type: 'line',
            data: [0],
            //设置折线为曲线
            smooth: true
        };
        let diskItem = {
            name: '磁盘占用',
            type: 'line',
            data: [0],
            smooth: true
        };
        let memoryItem = {
            name: '内存占用',
            type: 'line',
            data: [0],
            smooth: true
        };
        for (let i = 0; i < series.length; i++) {
            let item = series[i];
            if (i === 0) {
                //删除默认0的数据
                cpuItem.data.splice(0, 1);
                diskItem.data.splice(0, 1);
                memoryItem.data.splice(0, 1);
            }
            cpuItem.data.push(parseFloat(item.cpu));
            diskItem.data.push(parseFloat(item.disk));
            memoryItem.data.push(parseFloat(item.memory));
        }
        let array = [cpuItem, memoryItem, diskItem];
        loadEcharts(data.scale, array);
    }

    //拼接监控数据
    function addTopData(topData) {
        let option = myEcharts.getOption();
        let series = option.series;
        let xAxis = option.xAxis;
        let xAxisData = xAxis[0].data;

        let cpuItem = series[0];
        let memoryItem = series[1];
        let diskItem = series[2];
        cpuItem.data.push(parseFloat(topData.cpu));
        diskItem.data.push(parseFloat(topData.disk));
        memoryItem.data.push(parseFloat(topData.memory));
        //删除过时数据
        if (cpuItem.data.length > xAxisData.length) {
            cpuItem.data.splice(0, 1);
            diskItem.data.splice(0, 1);
            memoryItem.data.splice(0, 1);
            xAxisData.splice(0, 1);
            xAxisData.push(topData.time);
        }
        if (cpuItem.data[0] === 0) {
            cpuItem.data.splice(0, 1);
            diskItem.data.splice(0, 1);
            memoryItem.data.splice(0, 1);
        }
        let newSeries = [cpuItem, memoryItem, diskItem];
        loadEcharts(xAxisData, newSeries);
    }

    function linkSocket(status) {
        if (!('WebSocket' in window)) {
            layer.msg("不支持WebSocket");
            return;
        }
        var url = getSocketHost() + "/console?userId=[[${session.user.getUserMd5Key()}]]&projectId=system&nodeId=[[${node.id}]]&type=console";
        if (!ws) {
            ws = new WebSocket(url);
        }
        if (status) {
            if (ws.readyState !== 1 && ws.readyState !== 0) {
                ws = new WebSocket(url);
            }
            ws.onopen = function () {
                ws.send('{"op": "top", "projectInfo":{}}');
            };
            ws.onmessage = function (data) {
                try {
                    if (data.data) {
                        var top = JSON.parse(data.data);
                        if (top.top) {
                            addTopData(top);
                        }
                        if (top.processList) {
                            config.data = top.processList;
                            tableRender(config);
                        }
                    }
                } catch (e) {
                    return;
                }
            };
            ws.onerror = function (ev) {
                console.log(ev);
                layer.msg("socket 异常");
            }
        } else {
            ws.close();
        }
    }

    //加载监控图
    function loadEcharts(xAxis, series) {
        if (!series) {
            return;
        }
        let option = {
            title: {
                text: '系统监控'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['cpu占用', '内存占用', '磁盘占用'],
                right: '1%'
            },
            grid: {
                left: '1%',
                right: '2%',
                bottom: '1%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: xAxis
            },
            calculable: true,
            yAxis: {
                type: 'value',
                axisLabel: {
                    //设置y轴数值为%
                    formatter: '{value} %'
                },
                max: 100
            },
            series: series
        };
        if (!myEcharts) {
            myEcharts = echarts.init(document.getElementById('echarts'));
        }
        myEcharts.setOption(option);
    }

    function loadProcessList() {
        silentAjax({
            url: './processList',
            success: function (data) {
                if (200 === data.code && data.data) {
                    config.data = data.data;
                    tableRender(config);
                } else if (data.msg && data.msg !== "") {
                    layer.msg(data.msg);
                }
            }
        });
    }

</script>

</html>